---
title: Next.js
description: Regole di linting specifiche per Next.js in Ultracite.
---

La configurazione per Next.js include regole di linting specifiche per l'ottimizzazione delle immagini, la struttura del documento e i pattern dell'App Router.

## Installazione

Aggiungi la configurazione Next.js al tuo `biome.jsonc`:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## Panoramica

Questa configurazione aggiunge regole specifiche per lo sviluppo con Next.js:

- **Ottimizzazione delle immagini**: Forzare l'uso del componente Image di Next.js
- **Struttura del documento**: Evitare l'uso improprio dei componenti speciali di Next.js
- **Componenti client**: Assicurare che i componenti client asincroni siano gestiti correttamente
- **File di configurazione**: Gestione speciale per i file `next.config.*`

## Regole specifiche per Next.js

### Sperimentale

| Regola | Impostazione | Descrizione |
|--------|--------------|-------------|
| `noNextAsyncClientComponent` | `error` | Impedire componenti client asincroni in Next.js. I componenti client dovrebbero essere sincroni; usare i componenti server per operazioni asincrone. |

### Prestazioni

| Regola | Impostazione | Descrizione |
|--------|--------------|-------------|
| `noImgElement` | `error` | Vietare l'uso dell'elemento HTML `<img>`. Usare invece il componente Next.js `<Image>` per l'ottimizzazione automatica delle immagini. |

### Stile

| Regola | Impostazione | Descrizione |
|--------|--------------|-------------|
| `noHeadElement` | `error` | Vietare l'uso dell'elemento HTML `<head>`. Usare invece `next/head` di Next.js o l'API metadata dell'App Router. |

### Sospetti

| Regola | Impostazione | Descrizione |
|--------|--------------|-------------|
| `noDocumentImportInPage` | `error` | Impedire l'importazione di `next/document` nei file di pagina. `_document.tsx` dovrebbe esistere solo in `pages/_document.tsx`. |
| `noHeadImportInDocument` | `error` | Impedire l'importazione di `next/head` in `_document.tsx`. Usare invece `<Head>` da `next/document`. |

## Sovrascritture per file di configurazione

Il preset per Next.js include una gestione speciale per i file di configurazione e i componenti dell'App Router:

### File di configurazione di Next.js

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Questo permette pattern di configurazione di Next.js che normalmente potrebbero non superare le regole di linting.

### Pagine e layout dell'App Router

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

I componenti di pagina e layout dell'App Router sono autorizzati a essere asincroni senza richiedere `await`, poiché Next.js li gestisce in modo speciale per il rendering lato server e il recupero dei dati.